<template>
  <el-container class="height100  domainMainContent overflowy">
    <el-container
      direction="vertical"
      v-loading="loading"
      element-loading-text="正在同步"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.5)"
      class="bold letter_spacing greyColor"
    >
    <div class="partContent">
      <div class="part part0 paddingTRL0">
        <el-form
          ref="cloudForm"
          :model="CloudConfigs"
          label-position="top"
          label-width="180px"
          size="mini"
          :rules="rules"
        >
        <header_item  :headerArr="headerArr"  @onBtnClick="onBtnClick"/>
       <el-row  class="formItem">
            <el-col :span="6">
              <el-form-item
                label="云中心账户"
                prop="cloudAccount"
              >
                <el-input
                  v-model="CloudConfigs.cloudAccount"
                  :placeholder="$t('placeholder_enter_content')"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="5">
              <el-form-item
                label="云中心密码"
                prop="cloudPassword"
              >
                <el-input
                  type="password"
                  v-model="CloudConfigs.cloudPassword"
                  :placeholder="$t('placeholder_enter_content')"
                ></el-input>
              </el-form-item>
            </el-col>
        </el-row>
      </el-form>
      </div>
      <!-- <div :style="{ height: scrollHeight + 'px' }" class="width100 overflowy"> -->
          <div v-for="item in CloudConfigsArray" :key="item.value"> 
            <div class="part divisionPart">
              <el-row >
              <el-col
                ><p>{{ item.label }}</p></el-col
              >
            </el-row>
            <el-row
              class="row_border marginT18"
              v-for="ite in item.children"
              :key="ite.value"
            >
              <el-col :span="5" >{{ ite.label }}</el-col>
              <el-col :span="5"
                >调用次数:<span class="greenColor marginUpLeft">{{
                  ite.callCount
                }}</span
                >条</el-col
              >
              <el-col :span="5"
                >账户余额:<span class="greenColor marginUpLeft">{{
                  ite.balance
                }}</span
                >条</el-col
              >
              <el-col :span="1"><span class="blueColor">充值</span></el-col>
              <el-col :span="1"
                ><span class="blueLightColor">帮助</span></el-col
              >
            </el-row>
            </div>
          </div>
      <!-- </div> -->
    </div>
    </el-container>
  </el-container>
</template>

<script>
import { scrollHeight,processPassword } from "@/utils";
export default {
  components:{
  },
  data() {
    return {
      domainid:'',
      scrollHeight: scrollHeight,
      loading: false,
      rules: {
        cloudAccount: [
          { required: true, message: "请输入账号", trigger: "blur" },
        ],
        cloudPassword: [
          { required: true, message: "请输入密码", trigger: "blur" },
        ],
      },
      CloudConfigs: {},
      CloudConfigsArray: [],//云能力服务列表
      headerArr:{}
    };
  },
  created() {
    this.domainid=this.$route.query.domainid
    this.getCloudDomain()
     //关于标题的处理
     this.headerArr={iconfont:' icon-icon_ynl_off',content:'云能力',listHeaderClass:'noListHeader',btnArr:[{type:'primary',name:'save',label:this.$t('save')}] }
  },
  methods:{  
    onBtnClick(name){
      if(name=='save'){this.saveCloud()}
    },
     getCloudDomain(){
      this.$api.getCloudDomain(this.domainid,{
        onSucess: response => {
          let response1=response.data.data
          this.CloudConfigs={
            cloudAccount:response1.account,
            cloudPassword:response1.password
          }
          response1.data.forEach(e => {
            let obj={}
            obj.children=[]
            obj.label=e.category
            obj.value=e.category
            obj.children.push({value:e.name,label:e.name,callCount:e.callCount,balance:e.balance})
            this.CloudConfigsArray.push(obj)
          });
        }
      });
    },
    saveCloud(){
      let content={}
      content.account=this.CloudConfigs.cloudAccount
      content.password=processPassword(this.CloudConfigs.cloudPassword)
      this.$refs["cloudForm"].validate((valid) => {
        if (valid) {
         this.$api.updateCloudDomain(this.domainid, content, {
          onSucess: (resp) => {
            if (resp && resp.data.errcode == 0) {
              this.$message({
                showClose: true,
                message: this.$t('msg_save_success'),
                type: "success",
              });  
            }else {
              this.$message({
                message: resp.data.errmsg,
                type: "error",
              });
            }
           }
         })
        }
      })
   },
  }
};
</script>
